import {useState} from 'react';
import {connect} from 'react-redux';
import Taro from '@tarojs/taro';
import {View, Image} from '@tarojs/components';
import { AtTabs, AtTabsPane } from 'taro-ui';
import { Grid } from '@nutui/nutui-react-taro'
import products from "./productList.json";
import './index.less'

function Orders(){
    const [current, setCurrent] = useState(0);
    function  handleClick (value) {
        setCurrent(value)
    }
    const tabList = [{ title: '全部' }, { title: '快充桩' }, { title: '慢充桩' }]
    const productList = products.rows;
    return (
        <View className='productWrap'>
            <AtTabs current={current} tabList={tabList} onClick={(val) => handleClick(val)}>
                <AtTabsPane current={current} index={0} >
                  <View className='products'>
                    <Grid gap={12} columns={2}>
                        {
                            productList.map((i) => {
                                return (
                                    <Grid.Item
                                      onClick={() => Taro.navigateTo({url: `/moduleA/pages/products/detail?productId=${i.id}`})}
                                      text={i.name}
                                    >
                                        <Image mode={i.id !== '6' ? 'aspectFill' : 'aspectFit'} src={i.imgSrc} />
                                    </Grid.Item>
                                )
                            })
                        }
                    </Grid>
                  </View>
                </AtTabsPane>
                <AtTabsPane current={current} index={1}>
                  <View className='products'>
                    <Grid gap={12} columns={2}>
                        {
                            productList.filter((l) => l.type === 'dc').map((i) => {
                                return (
                                    <Grid.Item
                                      onClick={() => Taro.navigateTo({url: `/moduleA/pages/products/detail?productId=${i.id}`})}
                                      text={i.name}
                                    >
                                        <Image mode={i.id !== '6' ? 'aspectFill' : 'aspectFit'} src={i.imgSrc} />
                                    </Grid.Item>
                                )
                            })
                        }
                    </Grid>
                  </View>
                </AtTabsPane>
                <AtTabsPane current={current} index={2}>
                  <View className='products'>
                    <Grid gap={12} columns={2}>
                        {
                            productList.filter((l) => l.type === 'ac').map((i) => {
                                return (
                                    <Grid.Item
                                      onClick={() => Taro.navigateTo({url: `/moduleA/pages/products/detail?productId=${i.id}`})}
                                      text={i.name}
                                    >
                                        <Image mode={i.id !== '6' ? 'aspectFill' : 'aspectFit'} src={i.imgSrc} />
                                    </Grid.Item>
                                )
                            })
                        }
                    </Grid>
                  </View>
                </AtTabsPane>
            </AtTabs>
        </View>
    )
}

export default connect(({order}) => {return {...order}})(Orders)
